<template>
	<view class="background">
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
	</view>
</template>

<script>
	export default {
		name: "animatedIndex",
		data() {
			return {

			};
		}
	}
</script>

<style>
	@keyframes move {
		100% {
			transform: translate3d(0, 0, 1px) rotate(360deg);
		}
	}

	.background {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background: #000000;
		overflow: hidden;
		z-index: -1;
	}

	.background text {
		width: 20vmin;
		height: 20vmin;
		border-radius: 20vmin;
		backface-visibility: hidden;
		position: absolute;
		animation: move;
		animation-duration: 45;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}


	.background text:nth-child(0) {
		color: #ffffff;
		top: 70%;
		left: 19%;
		animation-duration: 16s;
		animation-delay: -13s;
		transform-origin: 12vw 9vh;
		box-shadow: 40vmin 0 5.3393862554848255vmin currentColor;
	}

	.background text:nth-child(1) {
		color: #ff6601;
		top: 6%;
		left: 24%;
		animation-duration: 35s;
		animation-delay: -44s;
		transform-origin: 14vw -14vh;
		box-shadow: 40vmin 0 5.820276635973007vmin currentColor;
	}

	.background text:nth-child(2) {
		color: #666565;
		top: 45%;
		left: 6%;
		animation-duration: 14s;
		animation-delay: -4s;
		transform-origin: -21vw -17vh;
		box-shadow: 40vmin 0 5.897704467090682vmin currentColor;
	}

	.background text:nth-child(3) {
		color: #ffffff;
		top: 84%;
		left: 36%;
		animation-duration: 17s;
		animation-delay: -12s;
		transform-origin: -10vw 24vh;
		box-shadow: 40vmin 0 5.602418918966209vmin currentColor;
	}

	.background text:nth-child(4) {
		color: #ffffff;
		top: 67%;
		left: 94%;
		animation-duration: 44s;
		animation-delay: -25s;
		transform-origin: -15vw 5vh;
		box-shadow: -40vmin 0 5.105023472072041vmin currentColor;
	}

	.background text:nth-child(5) {
		color: #ff6601;
		top: 39%;
		left: 63%;
		animation-duration: 33s;
		animation-delay: -49s;
		transform-origin: 21vw 9vh;
		box-shadow: 40vmin 0 5.81862074948827vmin currentColor;
	}

	.background text:nth-child(6) {
		color: #ff6601;
		top: 88%;
		left: 84%;
		animation-duration: 35s;
		animation-delay: -13s;
		transform-origin: -16vw -12vh;
		box-shadow: 40vmin 0 5.064665613290548vmin currentColor;
	}

	.background text:nth-child(7) {
		color: #ff6601;
		top: 59%;
		left: 60%;
		animation-duration: 48s;
		animation-delay: -40s;
		transform-origin: -2vw 6vh;
		box-shadow: -40vmin 0 5.19837687887876vmin currentColor;
	}

	.background text:nth-child(8) {
		color: #666565;
		top: 10%;
		left: 62%;
		animation-duration: 29s;
		animation-delay: -9s;
		transform-origin: 25vw 16vh;
		box-shadow: -40vmin 0 5.473130981934565vmin currentColor;
	}

	.background text:nth-child(9) {
		color: #666565;
		top: 15%;
		left: 24%;
		animation-duration: 35s;
		animation-delay: -23s;
		transform-origin: 11vw 20vh;
		box-shadow: -40vmin 0 5.793884946072755vmin currentColor;
	}

	.background text:nth-child(10) {
		color: #ff6601;
		top: 28%;
		left: 100%;
		animation-duration: 24s;
		animation-delay: -27s;
		transform-origin: -14vw 5vh;
		box-shadow: -40vmin 0 5.357894297225897vmin currentColor;
	}

	.background text:nth-child(11) {
		color: #666565;
		top: 68%;
		left: 17%;
		animation-duration: 28s;
		animation-delay: -30s;
		transform-origin: 16vw -8vh;
		box-shadow: -40vmin 0 5.511912109834465vmin currentColor;
	}

	.background text:nth-child(12) {
		color: #ffffff;
		top: 7%;
		left: 82%;
		animation-duration: 40s;
		animation-delay: -20s;
		transform-origin: 18vw -19vh;
		box-shadow: -40vmin 0 5.282275028421235vmin currentColor;
	}

	.background text:nth-child(13) {
		color: #ffffff;
		top: 11%;
		left: 87%;
		animation-duration: 34s;
		animation-delay: -42s;
		transform-origin: 3vw -13vh;
		box-shadow: -40vmin 0 5.456138464823308vmin currentColor;
	}

	.background text:nth-child(14) {
		color: #ffffff;
		top: 17%;
		left: 73%;
		animation-duration: 16s;
		animation-delay: -36s;
		transform-origin: 18vw 6vh;
		box-shadow: 40vmin 0 5.223524272188674vmin currentColor;
	}

	.background text:nth-child(15) {
		color: #666565;
		top: 49%;
		left: 31%;
		animation-duration: 38s;
		animation-delay: -5s;
		transform-origin: -22vw -10vh;
		box-shadow: 40vmin 0 5.742226477793005vmin currentColor;
	}

	.background text:nth-child(16) {
		color: #ffffff;
		top: 82%;
		left: 62%;
		animation-duration: 12s;
		animation-delay: -48s;
		transform-origin: 2vw -6vh;
		box-shadow: -40vmin 0 5.821542266583678vmin currentColor;
	}

	.background text:nth-child(17) {
		color: #666565;
		top: 21%;
		left: 50%;
		animation-duration: 32s;
		animation-delay: -26s;
		transform-origin: 12vw 4vh;
		box-shadow: -40vmin 0 5.108344699347843vmin currentColor;
	}

	.background text:nth-child(18) {
		color: #666565;
		top: 2%;
		left: 6%;
		animation-duration: 49s;
		animation-delay: -40s;
		transform-origin: -8vw 22vh;
		box-shadow: -40vmin 0 5.17377347597669vmin currentColor;
	}

	.background text:nth-child(19) {
		color: #666565;
		top: 5%;
		left: 69%;
		animation-duration: 23s;
		animation-delay: -22s;
		transform-origin: 24vw -8vh;
		box-shadow: 40vmin 0 5.116223900625248vmin currentColor;
	}
</style>